<template>
	<view class="integral_box">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="integral_header">
			<view class="integral_title">当前积分</view>
			<view class="integral_num">
				<text>{{ integral }}</text>
			</view>
			<view class="integralList">
				<view class="">
					<view class="int_num">{{ sumIntegral }}</view>
					<view class="">累计积分</view>
				</view>
				<view class="">
					<view class="int_num">{{ deductionIntegral }}</view>
					<view class="">累计消费</view>
				</view>
				<view class="">
					<view class="int_num">{{ frozenIntegral }}</view>
					<view class="">冻结积分</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="tabs">
				<view
					:class="{
						midlle_tabs1: point,
						midlle_tabs: !point,
						midlle_second: !point
					}"
					@click="changePages"
				>
					<image
						src="../static/img/qingdan.png"
						mode=""
						v-if="!point"
					></image>
					<image
						src="../static/img//qindanac.png"
						mode=""
						v-else
					></image>
					<text>分支明细</text>
				</view>
				<view
					:class="{
						midlle_tabs: point,
						midlle_tabss: point,
						midlle_tabs1: !point,
						midlle_tabss1: !point
					}"
					@click="changePage"
				>
					<image
						src="../static/img/shangsheng.png"
						mode=""
						v-if="point"
					></image>
					<image
						src="../static/img/shangshengac.png"
						mode=""
						v-else
					></image>
					<text>分支提升</text>
				</view>
			</view>

			<view class="" v-show="point">
				<view class="tabsList">
					<view class="dateList">
						<view
							class="dateitem"
							v-for="(item, index) in dateList"
						>
							<view class="dateTitle">{{ item.title }}</view>
							<view class="dateDay">{{ item.createDay }}</view>
							<view class="dateNm">+{{ item.number }}</view>
						</view>
					</view>
				</view>
				<view class="emg">
					哼~
					<image src="./../static/img/crying-3.png" mode=""></image>
					我也是有底线的~
				</view>
			</view>
		</view>
		<view class="" v-show="Points">
			<view class="Points">
				<view class="">
					<image src="./../static/img/score.png" mode=""></image>
				</view>
				<view class="pointsTitle">购买商品可获得积分奖励</view>
				<view
					class="pointsbtn"
					style="cursor: pointer;"
					@click="toClassify"
				>
					<text>赚积分</text>
				</view>
			</view>
			<view class="Points">
				<view class="">
					<image src="./../static/img/score.png" mode=""></image>
				</view>
				<view class="pointsTitle">每日签到可获得积分奖励</view>
				<navigator url="../user_vip/signIn">
					<view style="cursor: pointer;" class="pointsbtn">
						<text>赚积分</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {integration} from "../../../network/user.js";
import {signInList} from "../../../network/vip.js";
export default {
	data() {
		return {
			deductionIntegral: "",
			frozenIntegral: "",
			integral: "",
			sumIntegral: "",
			Points: false,
			point: true,
			dateList: []
		};
	},
	components: {
		Nav
	},
	methods: {
		toClassify() {
			uni.switchTab({
				url: "/pages/classify/classify"
			});
		},
		changePages() {
			this.Points = false;
			this.point = true;
		},
		changePage() {
			this.Points = true;
			this.point = false;
		},
		async getInfo() {
			let {data} = await integration();
			console.log(data);
			this.deductionIntegral = data.deductionIntegral;
			this.frozenIntegral = data.frozenIntegral;
			this.integral = data.integral;
			this.sumIntegral = data.sumIntegral;
			console.log();
		},
		async getList() {
			let {data} = await signInList();
			console.log(data.list);
			this.dateList = data.list;
			console.log(this.dateList);
		}
	},
	created() {
		this.getInfo();
		this.getList();
	}
};
</script>

<style lang="scss">
.tabs {
	position: relative;
	top: -80rpx;
	background-color: #ccc;
	border-radius: 40rpx 40rpx 0 0;
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: space-around;
	text-align: center;
	// border: #f9ccb7 1px solid;
	line-height: 130rpx;
	height: 130rpx;

	view image {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		vertical-align: -5%;
	}
	text {
		display: inline-block;
		margin-left: 15rpx;
	}
}
.integral_box {
}
.integral_title {
	text-align: center;
	margin: auto;
	width: 100%;
	margin-top: 30rpx;
	color: #f9ccb7;
	margin-bottom: 20rpx;
}
.integral_header {
	overflow: hidden;
	height: 450rpx;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100%;
	.integral_num {
		text-align: center;
		margin: auto;
		font-size: 60rpx;
		color: white;
		> text {
			border-bottom: 1px solid white;
			padding-bottom: 20rpx;
		}
	}
	.integralList {
		color: white;
		display: flex;
		justify-content: space-around;
		margin-top: 70rpx;
		text-align: center;
		.int_num {
			margin-bottom: 10rpx;
		}
	}
}
.midlle_tabs {
	width: 100%;
	background-color: white;
	border-radius: 40rpx 0 0 0;
	// border-right: 1px solid black;
	// height: 80rpx;
}
.midlle_tabs1 {
	width: 100%;
	background-color: white;
	border-radius: 40rpx 0 0 0;
	color: red;
	// border-right: 1px solid black;
	// height: 80rpx;
}
.midlle_second {
	background-color: #f7f7f7;
}
.midlle_tabss {
	border-radius: 0 40rpx 0 0;
	background-color: #f7f7f7;
}
.midlle_tabss1 {
	border-radius: 0 40rpx 0 0;
}
.tabsList {
	padding-left: 100rpx;
	padding-top: 100rpx;
	// overflow: hidden;
	width: 100%;
	height: 500rpx;
	background-color: white;
	// border: 1px solid black;
	position: relative;
	top: -100rpx;
	left: 0rpx;
	.listTile {
		// margin-top: 100rpx;
		margin-left: 20rpx;
		// margin-bottom: 20rpx;
	}
	.ListNum {
		margin-bottom: 20rpx;
		border-bottom: 1px solid #eeeeee;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
}
.integralNum {
	position: relative;
	top: -100rpx;
	left: 680rpx;
}
.emg {
	margin: auto;
	width: 100%;
	text-align: center;
	margin-top: -50rpx;
	> image {
		width: 30rpx;
		height: 30rpx;
	}
}
.Points {
	image {
		width: 100rpx;
		height: 150rpx;
	}
	display: flex;
	justify-content: space-around;
	text-align: center;
	line-height: 150rpx;
	height: 150rpx;
	background-color: #fff9ee;
	margin-bottom: 30rpx;
}
.pointsTitle {
	font-size: 35rpx;
	color: #c8a86b;
}
.pointsbtn {
	width: 200rpx;
	height: 60rpx;
	border: 1px solid #cbac72;
	border-radius: 50rpx;
	line-height: 60rpx;
	margin-top: 50rpx;
	color: #cbac72;
}
.dateList {
	margin-top: -100rpx;
	.dateitem {
		margin-left: 20rpx;
		height: 120rpx;
		border-bottom: 1px solid #e4e4e4;
		.dateTitle {
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}
		.dateDay {
			font-size: 30rpx;
			color: gray;
			margin-bottom: 25rpx;
		}
		.dateNm {
			position: relative;
			top: -100rpx;
			left: 480rpx;
			color: red;
			font-size: 40rpx;
			font-weight: lighter;
		}
	}
}
</style>
